import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// vite中获取环境变量
// console.log(import.meta.env);
import router from './router/index.js'
const app = createApp(App)
import api from './api'
import storage from './utils/storage'

// 全局自定义指令
app.directive('has', {
    // 操作节点
    beforeMount: (el, binding) => {
        let actionList = storage.getItem('actionList')
        // console.log(actionList);
        let value = binding.value
        let permission = actionList.includes(value)
        if (!permission) {
            // 按钮不应该显示
            el.style = "display:none"
            // setTimeout(()=>{
            // el.parentNode.removeChild(el)
            // },0)
        }
        // el 当前使用自定义指令的节点  
        // binding 传递参数
        // el 新增按钮 binding 拿到 'user-create'
        // 如果元素中的binding有相同的 => 有权限
        // 如果没有找到 => 没有权限 => el.style el.remove
    }
})

// 在属性前新增  加&  代表属性是程序员自己添加的,非系统自带的
app.config.globalProperties.$api = api;
// 全局引入element icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// step1 引入文件夹
import QueryForm from './packages'
// use(QueryForm)
app.use(QueryForm).use(router).use(store).use(ElementPlus).mount('#app')

// 按钮权限 和 菜单权限 完整
// 1.按钮权限
// step1 根据后台返回permissionList接口,返回actionList
//       这个数组里面存在元素字符，代表当前用户按钮权限(很多地方都有)
//     1.1 把这个数据放在VueX 
//     1.2 通过设置自定义指令，控制按钮是否出现